<!DOCTYPE html>
<html style="height: 100%;">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="css/mui.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/animate.css" />
    <link rel="stylesheet" href="css/swiper.min.css" />
</head>
<body style="height: 100%;">
	<div class="logo"><img src="images/logo.png"/></div>
	<div class="swiper-container">
	    <div class="swiper-wrapper">
	        <div class="swiper-slide banner1">
	        	<div class="bg-grey">
		        	<div class="w1200">
		        		<img src="images/banner1_01.png" class="ani b1" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="1s" />
						<img src="images/banner1_02.png" class="ani b2" swiper-animate-effect="slideInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s" />
						<img src="images/banner1_03.png" class="ani b2" swiper-animate-effect="slideInRight" swiper-animate-duration="1s" swiper-animate-delay="0s" />
					</div>
				</div>
	        </div>
	        <div class="swiper-slide banner2">
	        	<div class="bg-grey">
					<div class="w1200">
						<img src="images/banner1_01.png" class="ani b1" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="1s" />
						<img src="images/banner2_02.png" class="ani b3" swiper-animate-effect="slideInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s" />
						<img src="images/banner2_03.png" class="ani b4" swiper-animate-effect="slideInRight" swiper-animate-duration="1s" swiper-animate-delay="0s" />
					</div>
				</div>
	        </div>
	        <div class="swiper-slide banner3">
	        	<div class="bg-grey">
					<div class="w1200">
						<img src="images/banner1_01.png" class="ani b1" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="1s" />
						<img src="images/banner3_02.png" class="ani b5" swiper-animate-effect="slideInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s" />
						<img src="images/banner3_03.png" class="ani b6" swiper-animate-effect="slideInRight" swiper-animate-duration="1s" swiper-animate-delay="0s" />
					</div>
				</div>
	        </div>
	    </div>
	    <!-- 如果需要导航按钮 -->
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
		
		<!--点击跳转-->
		<a href="content.html" class="click-btn">点击跳转</a>
	</div>
	<script type="text/javascript" src="js/swiper.min.js" ></script>
	<script type="text/javascript" src="js/swiper.animate1.0.2.min.js" ></script>
	<script>      
	    var swiper = new Swiper('.swiper-container', {
	        nextButton: '.swiper-button-next',
    		prevButton: '.swiper-button-prev',
	        paginationClickable: true,
	        spaceBetween: 0,
	        centeredSlides: true,
	        autoplay: 8000,
	        autoplayDisableOnInteraction : false,
	         onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
			    swiperAnimateCache(swiper); //隐藏动画元素 
			    swiperAnimate(swiper); //初始化完成开始动画
			  }, 
			  onSlideChangeEnd: function(swiper){ 
			    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
			  } 
	    });
	</script>
</body>
</html>